<h2>
  Experience
  <span class="monospace">
    {{ ms.game.prestigeManager.experience | format: true:6 }}
  </span>
</h2>
<p>
  Spend your experience here. Experience spent are multiplied by
  <strong class="monospace">
    {{ ms.game.prestigeManager.prestigeMultiplier | format }}
  </strong>
</p>
<form nz-form [nzLayout]="'inline'">
  <nz-form-item>
    <nz-form-label nzFor="custom">Custom buy</nz-form-label>
    <nz-form-control>
      <input
        nz-input
        [(ngModel)]="ms.game.prestigeManager.customBuyString"
        (change)="reloadCustomBuy()"
        name="custom-buy"
      />
    </nz-form-control>
  </nz-form-item>
</form>

<nz-tabset>
  <nz-tab
    *ngFor="let tab of ms.game.prestigeManager.tabs; trackBy: getTabId"
    [nzTitle]="titleTemplate"
  >
    <ng-template #titleTemplate>
      <i nz-icon [nzType]="tab.icon"></i>
      {{ tab.name }}
    </ng-template>
    <ng-template nz-tab>
      <app-shop
        [prestiges]="tab.prestige"
        [customBuy]="ms.game.prestigeManager.customBuy"
      ></app-shop>
    </ng-template>
  </nz-tab>

  <nz-tab
    [nzTitle]="techListTitle"
    *ngIf="ms.game.prestigeManager.techPointsUnlocked"
  >
    <ng-template nz-tab>
      <nz-tabset nzTabPosition="left" class="tec-list">
        <!-- [nzTabBarExtraContent]="extraTemplate" -->
        <nz-tab
          *ngFor="
            let tab of ms.game.prestigeManager.techTabs;
            trackBy: getTabId
          "
          [nzTitle]="techTitleTemplate"
        >
          <ng-template #techTitleTemplate>
            <i nz-icon [nzType]="tab.icon"></i>
            {{ techExpanded ? tab.name : "" }}
          </ng-template>
          <ng-template nz-tab>
            <app-shop
              [prestiges]="tab.prestige"
              [customBuy]="ms.game.prestigeManager.customBuy"
            ></app-shop>
          </ng-template>
        </nz-tab>
      </nz-tabset>
    </ng-template>
  </nz-tab>

  <nz-tab
    *ngIf="!ms.game.prestigeManager.techPointsUnlocked"
    [nzTitle]="lockedTech"
  >
    <ng-template nz-tab>
      <h3>
        Require
        <span class="monospace">
          {{ PRESTIGE_TECH_UNLOCK | format }}
        </span>
        experience points spent on other categories.
      </h3>
      <p>
        You have spent
        <span class="monospace">
          {{ ms.game.prestigeManager.totalSpent | format }}.
        </span>
      </p>
      <div class="spent-progress">
        <app-progress
          [progress]="
            ms.game.prestigeManager.totalSpent
              .div(PRESTIGE_TECH_UNLOCK)
              .times(100)
              .floor()
              .min(100)
              .toNumber()
          "
        ></app-progress>
      </div>
    </ng-template>
  </nz-tab>
</nz-tabset>

<ng-template #techListTitle>
  <i nz-icon nzType="fa-s:book"></i>
  Technologies
</ng-template>
<ng-template #lockedTech>
  <i nz-icon nzType="lock" nzTheme="outline"></i>
  Locked
</ng-template>

<ng-template #extraTemplate>
  <button
    nz-button
    nzType="text"
    nzBlock
    (click)="techExpanded = !techExpanded"
  >
    <i nz-icon [nzType]="techExpanded ? 'left' : 'right'"></i>
  </button>
</ng-template>
